<template>
  <div ref="oListCell" class="out-list-cell">
    <el-tooltip class="el-popover" :disabled="!showBubble" placement="top" effect="dark">
      <template #content>
        <p :style="{ fontSize: setFontSize(20) + 'px'}">{{ text }}</p>
      </template>
      <span>{{ showText[0] }}</span>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { setFontSize } from "@/utils/px_rem";
import { textOmit } from "@/utils/tools";
import { watchEffect, ref, onMounted, onUnmounted, nextTick } from "vue";

const props = defineProps({
  textLen: { type: Number, default: 100 },
  text: { type: String, default: "" },
  defineClass: { type: Object, default: () => ({}) }
});

const showText = ref([]) as any;
const showBubble = ref(false) as any;

watchEffect(() => {
  showText.value = textOmit(props.text, props.textLen);
});

const oListCell = ref(null) as any;

//  监听鼠标事件
onMounted(() => {
  nextTick(bindEvent);
});

onUnmounted(() => {
  removeEvent();
});

//  绑定鼠标事件，点击事件
function bindEvent() {
  if (oListCell.value) {
    oListCell.value.addEventListener("click", mouseClick, false);
    oListCell.value.addEventListener("mouseenter", mouseEnter, false);
    oListCell.value.addEventListener("mouseleave", mouseLeave, false);
  }
}

//  移除鼠标事件，点击事件
function removeEvent() {
  if (oListCell.value) {
    oListCell.value.removeEventListener("click", mouseClick, false);
    oListCell.value.removeEventListener("mouseenter", mouseEnter, false);
    oListCell.value.removeEventListener("mouseleave", mouseLeave, false);
  }
}

//  鼠标移入事件
function mouseEnter() {
  const show: any = showText.value[1];
  showBubble.value = show;
}
//  鼠标移除事件
function mouseLeave() {
  console.log("mouselevel");
  showBubble.value = false;
}
//  鼠标点击事件
function mouseClick() {
  const show: any = showText.value[1];
  showBubble.value = show;
}
</script>

<style lang="scss" scoped>
.el-popover {
  font-size: 16px;
}

.out-list-cell {
  cursor: pointer;
}
</style>
